<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <div style="padding: 10px">
            <a-button type="primary" @click="add">{{ i18n('addBtn', '添加') }}</a-button>
            <div class="forewarning-common" v-if="forewarningList.length>0">
                <div class="forewarning-list" style="width: calc(100% - 30px)">
                    <div class="forewarning-list-input" style="text-align: left;font-size: 14px;font-weight: bold"
                         v-for="obj in columns">{{ obj }}
                    </div>
                </div>
                <div v-for="(item,index) in forewarningList" :key="index" class="forewarning-list">
                    <div class="forewarning-list-input">
                        <a-input v-model:value="item.name" :placeholder="i18n('lineName','辅助线名称')"/>
                    </div>
                    <div class="forewarning-list-input">
                        <a-select style="width: 100%" v-model:value="item.type">
                            <a-select-option value="immobilization">{{ i18n('fixValue', '固定值') }}</a-select-option>
                            <a-select-option value="average">{{ i18n('average', '平均值') }}</a-select-option>
                        </a-select>
                    </div>
                    <div class="forewarning-list-input" v-if="item.type =='average'">
                        <a-select style="width: 100%" v-model:value="item.average">
                            <a-select-option v-for="(obj,index) in measures" :key="index"
                                             :value="obj.tableName+'_'+obj.fieldName">{{ obj.fieldLabel }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="forewarning-list-input" v-if="item.type =='immobilization'">
                        <a-input-number style="width: 100%" v-model:value="item.immobilizationNumber" placeholder="输入固定值"/>
                    </div>
                    <div class="forewarning-list-input">
                        <a-select style="width: 100%" v-model:value="item.lineType">
                            <a-select-option value="solid">{{ i18n('solidLine', '实线') }}</a-select-option>
                            <a-select-option value="dashed">{{ i18n('dottedLine', '虚线') }}</a-select-option>
                        </a-select>
                    </div>
                    <div class="forewarning-list-input">
                        <rx-input-color v-model="item.lineColor" :color="item.lineColor"
                                        style="width: 100%;margin-right: 17px"></rx-input-color>
                    </div>
                    <div class="forewarning-list-input">
                        <a-input-number v-model:value="item.lineWidth" style="width: 100%" :min="1"/>
                    </div>
                    <div @click="deleteList(index)" class="delete-color">
                        <rx-icon-show icon="icon-lineVue3_delete"></rx-icon-show>
                    </div>
                </div>
            </div>
            <a-empty v-else/>
        </div>
    </rx-dialog>
</template>

<script>
import {Util, RxDialog} from "@lowcode/jpaas-base-lib";
import RxInputColor from "./rx-input-color.vue";

export default {
    name: "forewarning-common",
    props: ['destroy', 'forewarningConfig', 'measures'],
    components: {
        RxInputColor,
        RxDialog
    },
    data() {
        return {
            forewarningList: [],
            columns: [this.i18n('lineName', '辅助线名称'), this.i18n('valueType', '值类型'), this.i18n('metricValue', '度量/固定值'), this.i18n('lineStyleType', '线类型'), this.i18n('lineTransparency', '线颜色透明度'), this.i18n('thicknessLine', '线粗细')]
        }
    },
    mounted() {
        this.forewarningList = JSON.parse(JSON.stringify(this.forewarningConfig))
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "forewarningLang.forewarningCommon", key);
        },
        /*
        name:辅助线名称
        type:immobilization固定值，average平均值
        average:’‘,//选中那个度量的平均数字
        immobilizationNumber:1,//固定的数字
        lineWidth,//线的宽度
        lineType，//线类型
        lineColor://线颜色
         */
        add() {
            this.forewarningList.push({
                name: '',
                type: 'immobilization',
                average: "",
                immobilizationNumber: 1000,
                lineWidth: 1,
                lineType: 'dashed',
                lineColor: 'rgb(255,100,100,0.5)'
            })
        },
        handleSubmit() {
            Util.closeWindow(this, "ok", this.forewarningList);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        deleteList(index) {
            this.forewarningList.splice(index, 1)
        }
    }
}
</script>

<style scoped>
.forewarning-common {
    border-radius: 4px;
    border: solid 1px #dedede;
    padding: 10px;
    margin-top: 10px;
}

.forewarning-list {
    display: flex;
    margin-bottom: 10px;
}

.forewarning-list-input {
    flex: 1;
    margin-right: 10px
}

.delete-color {
    border-radius: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #ff585a;
    display: inline-block;
    cursor: pointer;
    color: white;
    line-height: 30px;
    z-index: 99;
    font-size: 18px;
}
</style>
